import { Component, Prop, PropSync, Vue, Watch } from 'vue-property-decorator'
import styles from './RadioGroup.less'
import { IStatus } from '@/lib/sealFormat'
let index: number = 0

@Component({})
export default class RadioGroup extends Vue {
  @PropSync('value') private currentId!: any
  @Prop({ default: [] }) private data!: IStatus[]
  @Prop({ default: true }) private showIntro!: boolean
  @Prop({ default: false }) private disabled!: boolean
  @Prop({}) private width!: number
  @Prop({}) private introRender!: (item: IStatus) => ''
  @Prop({}) private radioRender!: (item: IStatus) => ''

  private list: IStatus[] = []
  private currentItem: any = {}
  private elRect: any = {}
  private introArrowX: string = '50%'
  private id: number = 0

  // 选择
  private choose(e: Event, type: IStatus) {
    // if (e.target) {
    //   this.updateIntroArrowX(e.target as Element);
    // }

    this.currentItem = type
    this.currentId = type.id
  }

  // 移动箭头
  private updateIntroArrowX(el: Element) {
    const rect: any = el.getBoundingClientRect()
    this.introArrowX = `${rect.x - this.elRect.x + rect.width / 2}px`
  }

  getCurrentItemById(id: any) {
    return this.data.find(item => {
      return item.id === id
    })
  }

  getItemDomId(id: any) {
    return `radio-${this.id}-${id}`
  }

  created() {
    this.id = index++
  }

  mounted() {
    this.elRect = this.$el.getBoundingClientRect()
    if (this.currentId) {
      this.currentItem = this.getCurrentItemById(this.currentId)
      const itemDomId = this.getItemDomId(this.currentId)
      const itemEl = this.$el.querySelector(`#${itemDomId}`)
      if (itemEl) {
        this.updateIntroArrowX(itemEl)
      }
    }
  }

  renderIntroContent() {
    return this.introRender ? (
      this.introRender(this.currentItem)
    ) : (
      <div>
        <h6>{this.currentItem.value}</h6>
        <p>{this.currentItem.intro}</p>
      </div>
    )
  }

  renderRadioContent(item: IStatus) {
    return this.radioRender ? this.radioRender(item) : <span>{item.value}</span>
  }

  protected render(h: any) {
    // console.log(this.currentId, this._id);
    // disabled时只显示选中的项
    const list = this.disabled
      ? this.data.filter((item: IStatus) => {
          return item.id === this.currentId
        })
      : [...this.data]

    return (
      <div class={{ [styles.szRadioGroup]: true }}>
        <div style="display:inline-block;">
          {list.map((item: IStatus, index: number) => (
            <div
              id={this.getItemDomId(item.id)}
              class={{
                [styles.szRadioItem]: true,
                [styles.szRadioItemActive]: item.id === this.currentId,
              }}
              onClick={(e: Event) => {
                this.choose(e, item)
              }}
            >
              <i class={[styles.szRadioBtnCheck, 'el-icon-check']} />
              <div class={[styles.szRadioBtn]}>
                {this.renderRadioContent(item)}
              </div>
            </div>
          ))}
        </div>
        {this.showIntro ? (
          <div
            class={styles.szRadioIntro}
            style={{ width: this.width ? `${this.width}px` : '100%' }}
          >
            <div
              class={styles.szRadioIntroArrow}
              style={{ left: this.introArrowX }}
            />
            {this.renderIntroContent()}
          </div>
        ) : (
          ''
        )}
      </div>
    )
  }

  @Watch('currentId')
  private currentIdChange(val: number) {
    this.currentItem = this.getCurrentItemById(this.currentId)
    const itemDomId = this.getItemDomId(this.currentId)
    const itemEl = this.$el.querySelector(`#${itemDomId}`)
    if (itemEl) {
      this.updateIntroArrowX(itemEl)
    }
  }
}
